import Taro, {Component} from "@tarojs/taro";
import {View, Image, Text} from "@tarojs/components";
import {toJS} from 'mobx'
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'

import {getRuntime, pageSize,servicePhoneNumber} from '../../utils/common'

import './help.less'
import right from "../../assets/img/right.png";
// import none_people from "../../assets/img/none_people.png";

// 帮助中心
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class Personnel extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    pageIndex:1,
    pageSize,
    items: [],
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({ title:'帮助中心' })
    this.getDoubtAnswers()
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  getDoubtAnswers() {
    let { userStore } = this.props.stores
    userStore.getDoubtAnswers({
      callback: res => {
          this.setState({items: toJS(res.items)})
      }
    })
  }

  makePhone() {
    getRuntime().makePhoneCall(servicePhoneNumber)
  }

  render() {
    let { items } = this.state
    return (
      <View className='my-help'>
        {items.length>0&&
        <View className='help-item'>
          {
            items.map(item => {
              return(
                <View className='item' onClick={this.handelRouter.bind(this, '/pages/user/help_detail?id='+item.id)}>
                  <View className='list-title'>{item.title}</View>
                  <Image src={right} className='icon-drop-down' />
                </View>
              )
            })
          }
        </View>
        }

        {items.length<=0&&
        <View className='page-none-info'>
           <Text className='none-title list-desc'>信息收集中...</Text>
        </View>
        }

        <View className='page-submit' onClick={this.makePhone.bind(this)}>联系客服：{servicePhoneNumber}</View>
      </View>
    )
  }
}

export default Personnel
